<template>
	<view>
		<view class="search-question">
			<!-- 搜索结果 -->
			<!-- 提交3-master -->
			<!-- 提交2 -->
			<view class="search-content share">
				<view class="title-left">
					<text>{{inputValue}}</text> - <text>常见问题</text>
				</view>
				<view class="title-right">
					<view  class="paixu-all" @click="showPai(3)">
						排序
						<image src="/static/down.png" mode=""></image>
					</view>
					<view class="paixu" v-show="showPaixu == 3">
						<view @click="questionPaiXu(index)" v-for="(item,index) in sortTab"
							:class="{lighting: questionActive == index}" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="question-li share" v-for="(item,index) in quesContents" :key="index">
				<view class="">
					<view class="question-des">
						<image class="doc" src="/static/wenhao.jpg" mode=""></image>
						<view class="high-light" v-html="highLight(item.title)"></view>
					</view>
					<view class="question-content">
						{{item.tag}}
					</view>
					<view class="question-time">
						2020-01-08 12:00
					</view>
				</view>
			</view>
			<!-- /搜索结果 -->

			<!-- 点击加载更多 -->
			<view class="look-more" v-if="noneData" @click="updateMore">
				<view class="more-box">
					<text v-if="showBottom">查看更多</text>
					<text class="show-bottom" v-else>没有更多的了</text>
				</view>
			</view>
			<!-- /点击加载更多 -->
		</view>
	</view>
</template>

<script>
	import {
		request,
		postRequest
	} from "../utils/request.js"
	export default {
		name: "question",
		data() {
			return {
				showBottom: true,
				questionPage: 1,
				questionActive: 0,
				showPaixu: false,
				quesContents: this.quesContent,
				sortTab: ["综合排序", "时间排序"],
				city: '',
				noneData: true
			};
		},
		
		props: {
			inputValue: String,
			quesContent: Array,
			fenci: Array
		},
		
		watch: {
			quesContent(val) {
				this.quesContents = val;
			}
		},
		
		mounted() {
			this.city = uni.getStorageSync("city");
		},
		
		methods: {
			reLoad(){
				this.showBottom = true;
				this.questionPage = 1;
			},
			
			showPai(value) {
				this.showPaixu == value ? this.showPaixu = 0 : this.showPaixu = value;
			},

			questionPaiXu(index){
				this.questionActive = index;
				this.questionActive === 0 ? this.getRequest() : this.getRequest("time");
			},
			
			getRequest(val){
				let getData = {
					citycode: "wenda",
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					city: this.city.cityname,
					ordertype: val
				}
				request("index.php", getData, "GET").then((res) => {
					this.quesContents = res.data;
				})
			},
			
			// 点击更多 
			updateMore() {
					this.questionPage ++;
					request("index.php", {
						citycode: "wenda",
						action: "list",
						keywords: this.inputValue,
						pagesize: 10,
						city: this.city.cityname,
						page: this.questionPage
					}, "GET").then((res) => {
						if (res.data == "") {
							this.showBottom = false;
						} else {
							this.showBottom = true;
							this.quesContents = this.quesContents.concat(res.data);
						}
					})
			},

			highLight(val) {
				this.fenci.forEach((item) => {
					val = val.replace(new RegExp(item, "gi"),
						`<span style="color: #FF6600">${item}</span>`);
				})
				return val;
			}
		}
	}
</script>

<style  lang="stylus">
	@import '../common.styl'
</style>
